<template>
    <div class="articles">
        <div class="tinymce-container">
            <header>发表文章</header>
            <el-form ref="form" :model="form" label-width="120px">

                <el-form-item label="标题">
                    <el-input v-model="form.name" placeholder="文章名称" class="huodong"></el-input>
                </el-form-item>

                <el-form-item label="内容">
                    <el-input type="textarea" class="centent" :rows="6" v-model="form.desc"></el-input>
                </el-form-item>

                <el-form-item label="封面">
                    <el-upload
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false"
                         :on-success="handleAvatarSuccess">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            <span class="el-upload-list__item-actions">
                                <span
                                class="el-upload-list__item-preview"
                                @click="handlePictureCardPreview(file)"
                                >
                                <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleDownload(file)"
                                >
                                <i class="el-icon-download"></i>
                                </span>
                                <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleRemove(file)"
                                >
                                <i class="el-icon-delete"></i>
                                </span>
                            </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                </el-form-item>

                <el-form-item label="频道">
                     <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
 
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">发表</el-button>
                    <el-button>存入草稿</el-button>
                </el-form-item>
            </el-form>
        </div>
        

    </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        form: {
            name: '',
            desc:'', 
        },
        options: [{
            value: '2',
            label: '开发者资讯'
            }, {
            value: '3',
            label: 'ios'
            }, {
            value: '4',
            label: 'c++'
            }, {
            value: '5',
            label: 'android'
            }, {
            value: '6',
            label: 'css'
            }, {
            value: '7',
            label: '数据库'
            }, {
            value: '8',
            label: 'go'
            }, {
            value: '9',
            label: '产品'
            }, {
            value: '10',
            label: '后端'
            }, {
            value: '11',
            label: 'linux'
            }
        ],
        value:'',
        imgType:'single'
      }
    },
    methods: {
        onSubmit() {
            this.axios.post('/itcast/mp/v1_0/articles',
                {
                    channel_id:JSON.parse(this.value),
                    content:this.form.desc,
                    title:this.form.name,
                    cover:{
                        images:['http://toutiao.meiduo.site/Fm38EQmT7o2qXzWFuAChE5M6H9C-'],
                        type:1,
                    },
                    imgType:this.imgType,
                },
                {
                    headers:{
                        'Authorization':'Bearer '+this.$store.state.userInfo.token,
                        'Content-Type':'application/json'
                    }
                },
            ).then((data)=>{
                //清空
                this.value = '';
                this.form.desc = '';
                this.form.name = '';
                this.$router.push('/list')
                
            })
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            console.log(this.dialogImageUrl)
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        handleAvatarSuccess(file){
            console.log(file);
        }
    }
  }
</script>
<style lang="less" scoped>
    .articles{
        .tinymce-container{
            background-color: #fff;
            text-align: left;
            border: 1px solid #e7e7e9;
            header{
                color: #323745;
                font-size: 14px;
                height: 55px;
                line-height: 55px;
                padding: 0 15px;
                background-color: #fbfbfb;
                border-bottom: 1px solid #e8e8e8;
            }
            .el-form{
                padding: 20px 30px 0 0;
                .huodong{
                    width: 400px;
                }
                .el-form-item{
                    margin: 20px 0;
                    .el-form-item__content{
                        .centent{
                            width: 500px;
                        }
                    }
                }
            }
        }
    }
</style>
